<template>
    <div class="index">
        <!-- 模态框 -->
        <div class="zhezhao" v-show="visib">
            <div class="tanchu">
                <button v-on:click="visib = false">关闭</button>
                <form action="">
                    <input type="text" placeholder="用户">
                </form>
            </div>
        </div>
        <!-- 弹出按钮 -->
        <button v-on:click="visib = true">显示隐藏</button>

        <!-- v-if: 用来控制元素的销毁与加载的 
        tab 选项卡
        true显示
        false销毁
        -->
        <div id="box" v-if="true">
            我是一段内容
        </div>
        <hr>
        <!-- 选项卡按钮 -->
        <button v-on:click="index = 1">01</button>
        <button v-on:click="index = 2">01</button>
        <button v-on:click="index = 3">01</button>
        <!-- 选项卡面板 -->
        <ul>
            <li v-show="index === 1" style="background: yellow;">1</li>
            <li v-show="index === 2" style="background: pink;">2</li>
            <li v-show="index === 3" style="background: blue;">3</li>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return {
            visib:false,//不显示
            index: 1,

        }
    }
}
</script>
<style>
.zhezhao{
    background: rgba(0,0,0,.3);
    position: absolute;
    width: 100%;
     /* vh vw 把屏幕分成100等份 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items:center;
}
</style>